<template>
  <el-form :inline="true" style="margin-top: 20px">
    <el-form-item label="一级列表">
      <el-select
        v-model="(categoryStore.category1Id as number)"
        placeholder="请选择"
        :disabled="disabled"
      >
        <el-option
          v-for="item in categoryStore.category1List"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="二级列表">
      <el-select
        v-model="(categoryStore.category2Id as number) "
        placeholder="请选择"
        :disabled="disabled"
      >
        <el-option
          v-for="item in categoryStore.category2List"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="三级列表">
      <el-select
        v-model="(categoryStore.category3Id as number)"
        placeholder="请选择"
        :disabled="disabled"
      >
        <el-option
          v-for="item in categoryStore.category3List"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "CategorySelect",
  });
</script>
<script lang="ts" setup>
  import { useCategoryStore } from "@/stores/category";
  import { onMounted, watch } from "vue";
  const categoryStore = useCategoryStore();

  defineProps<{
    disabled: boolean;
  }>();
  onMounted(() => {
    categoryStore.getCategory1List();
  });

  //监听一级列表是否已选择 然后获取二级列表数据
  watch(
    () => categoryStore.category1Id,
    (val) => {
      if (val) {
        categoryStore.getCategory2List(val);
      }
    }
  );
  //监听二级列表是否已选择 然后获取三级列表数据
  watch(
    () => categoryStore.category2Id,
    (val) => {
      if (val) {
        categoryStore.getCategory3List(val);
      }
    }
  );
</script>

<style lang="less" scoped></style>
